<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 常用属性练习</title>
    <link rel="stylesheet" href="./css/main.css">
</head>

<body>
    <header>
        <h1>CSS 常用属性练习</h1>
    </header>
    <main>
        <section>
            <h2>字体相关属性</h2>
            <p>字体常用属性字体常用属性字体常用属性字体常用属性字体常用属性</p>
        </section>
        <section class="bg-demo">
            <h2>背景</h2>
            <p>CSS 中提供了为元素设定背景的功能，我们看到许多设计精良的网页，在很大程度上是灵活运用 CSS 背景实现装饰效果的。在 CSS
                中，不但可以为整个网页设定背景，也可为具体元素设定背景，任何可显示出来的元素都可以设定背景样式。</p>
        </section>

        <section class="box-model">
            <h2>盒模型</h2>
            <p>元素的盒模型由外边距 (margin)、边框线 (border)、内边距（padding）以及元素的内容（content）构成。</p>
            <div>容器</div>
        </section>

        <section>
            <h2>信息流</h2>
            <p>浏览器在呈现信息时会按照元素的类型进行处理，它将块元素从上到下显示（块元素与块元素之间另起一行），将行内元素按语言方向水平显示（如汉字、英语是从左到右，维吾尔语、阿拉伯语等有些语言是从右到左），行内元素直到到达容器边缘时才换行显示，这种显示元素的方式叫做页面的正常流。
            </p>

            <p> 常见的大多数元素属于块元素，如 p、table、div、li、ul、ol、object、h1-h6 等等，行内元素有 a、span、img、b、strong
                等等。需要注意的是，匿名内容（即没有使用元素标签标注的内容）也按行内元素处理。</p>
        </section>
    </main>
    <footer>
        <p><span>《网页设计与制作》课程练习</span><span>学号：</span><span>指导老师：杨志宏</span></p>
    </footer>
</body>

</html>
